<template>
  <div class="warn-dialog">
    <el-drawer
      title="流程状态"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
      :width="400"
    >
      <el-timeline v-if="nodeList && nodeList.length > 0">
        <el-timeline-item
          v-for="(activity, index) in nodeList"
          :key="index"
          color="blue"
          class="flow-green"
        >
          <div class="description">
            <div class="warn-title">
              <div style="color: #29447b">{{ activity.tenantName }}</div>
              <div class="warn-flow">{{ activity.handleType == 1 ? '船载端' : activity.handleType == 0 ? '岸基端' : '' }}</div>
              <div style="margin-left: 10px;color: #29447b;">{{ activity.processor }}</div>
              <div class="warn-flow">
                {{
                  statusDic.find(item => item.value == activity.status).label
                }}
              </div>
            </div>
            <div
              class="warn-content"
              :style="{
                paddingBottom:
                  activity.fileAddress.length > 0 &&
                  activity.fileAddress.split(',').length > 2
                    ? '40px'
                    : ''
              }"
            >
              <div style="color: #29447b">{{ activity.createTime }}</div>
              <div style="color: #29447b;margin-top: 10px;">{{ activity.crewNames }}</div>
              <div v-show="activity.remarks" class="warn-description">
                {{ activity.remarks }}
              </div>

              <div
                v-if="activity.fileAddress && activity.fileAddress.length > 0"
                class="warn-img"
              >
                <div
                  v-for="(item, index) in activity.fileAddress.split(',')"
                  :key="index"
                >
                  <!-- <el-image
                    fit="fill"
                    :src="dowmLoadUrl(item)"
                    :preview-src-list="[dowmLoadUrl(item)]"
                  >
                  </el-image> -->
                  <UpImg :list="[item]" :limit="1" :disabled="true"></UpImg>
                </div>
              </div>
              <!-- <div v-if="activity.fileAddress" class="warn-img">
                <el-image
                  fit="fill"
                  :src="dowmLoadUrl(activity.fileAddress)"
                  :preview-src-list="[dowmLoadUrl(activity.fileAddress)]"
                >
                </el-image>
              </div> -->
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-else description="暂无告警流程信息"></el-empty>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawer: false,
      nodeList: [],
      statusDic: [
        {
          label: '确警',
          value: 0
        },
        {
          label: '误警',
          value: 1
        },
        {
          label: '已处理',
          value: 2
        },
        {
          label: '更新处理',
          value: 3
        }
        ,
        {
          label: '已通知整改',
          value: 4
        }
      ]
    }
  },
  computed: {
    dowmLoadUrl() {
      return function (url) {
        return `/api/oss/download/sturgeon?objectName=${encodeURIComponent(
          url
        )}`
      }
    }
  },
  methods: {
    show(value) {
      this.drawer = true
      this.nodeList = value
    },
    handleClose() {
      this.drawer = false
    },
    ondown(url) {
      console.log('🤡 ~ this.$utils:', this.$utils, url)
      this.$utils.downloadFile(url)
    }
  }
}
</script>
<style scoped lang="scss">
@import '@/assets/styles/variables';

.warn-dialog {
  ::v-deep .el-drawer__header {
    background-color: var(--theme);
    padding-bottom: 20px;
    color: #fff;
    margin-bottom: 10px;
  }

  ::v-deep .el-drawer__body {
    padding: 10px;
    @include scrollBar();

    .el-timeline {
      padding-left: 20px;
      .el-timeline-item {
        width: 100%;
      }
      .flow-red .el-timeline-item__tail {
        border-left: 2px dashed #aaa;
      }

      .flow-red .el-timeline-item__node {
        border: 3px solid hsla(0, 0%, 90%, 0.7);
      }

      .flow-green .el-timeline-item__tail {
        border-left: 2px solid #3576cf;
      }

      .flow-green .el-timeline-item__node {
        border: 3px solid hsla(0, 0%, 90%, 0.7);
      }

      .description {
        .warn-title {
          display: flex;
          align-items: center;
          .warn-flow {
            color: #29447b;
            margin-left: 40px;
            word-break: keep-all;
          }
        }
        .warn-content {
          width: 100%;
          margin-top: 10px;
          .warn-description {
            word-wrap: break-word;
            margin-top: 5px;
          }

          .warn-img {
            display: flex;
            flex-wrap: wrap;
            div {
              margin-right: 5px;
              margin-top: 10px;
            }
            div:nth-child(3) {
              // margin-top: 60px;
            }
          }
        }
      }
    }
  }
}
</style>
